<template>
    <div class="layer-manager-container">
        <span class="layer-manager-title"> 全球数据 </span>
        <div style="text-align: left;">
            <div class="layer-items">
                <span>底图</span>
                <div style="margin-left:20px;margin-bottom: 10px;margin-top:5px;">
                    <el-radio-group v-model="imageDataRadio" size="small" @change="changeImageData">
                        <el-radio-button value="bingImage">Bing影像</el-radio-button>
                        <el-radio-button value="tdtImage"> 天地图-影像</el-radio-button>
                        <el-radio-button value="tdtVec">天地图-地图</el-radio-button>

                    </el-radio-group>
                </div>
            </div>
            <div class="layer-items">
                <span>注记</span>
                <div>
                    <el-checkbox v-model="tdtAnnotationChecked" label="天地图-注记" size="large" @change="changeTdtAnnotation"/>
                </div>
            </div>
        </div>
    </div>

</template>
<script lang="ts" setup>

import { TDT_KEY } from '@/system/Config/SystemConfig'
import { LayerIdFlag, tdtAnnotationInfo, tdtImageLayerInfo, tdtVecLayerInfo } from '@/system/LayerManager/LayerConfig'
import LayerManager from '@/system/LayerManager/LayerManager'
import CesiumViewer from '@/Viewer/CesiumViewer'
import { ElMessage } from 'element-plus'

const imageDataRadio = ref('bingImage')

const tdtAnnotationChecked = ref(false)


const viewer = CesiumViewer.viewer
let mLayerManager: LayerManager | null = null

onMounted(() => {
    mLayerManager = LayerManager.getInstance(viewer!)
})

const changeImageData = (val: string | number | boolean | undefined) => {
    imageDataRadio.value = val as string   
    if(TDT_KEY===""){
        ElMessage.error("请先在src/system/Config/SystemConfig.ts中配置天地图密钥TDT_KEY")
        imageDataRadio.value='bingImage'
        return;
    }
   
    switch (val) {
        case 'bingImage':
            mLayerManager?.Remove(LayerIdFlag.TDT_IMAGERY_WMTS)
            mLayerManager?.Remove(LayerIdFlag.TDT_VECTOR_WMTS)
            break
        case 'tdtImage':
            mLayerManager?.Remove(LayerIdFlag.TDT_VECTOR_WMTS)
            mLayerManager?.Add(tdtImageLayerInfo)
            break
        case 'tdtVec':
            mLayerManager?.Remove(LayerIdFlag.TDT_IMAGERY_WMTS)
            mLayerManager?.Add(tdtVecLayerInfo)
            break
        default:
            break
    }

    // 置顶标注图层
    if (tdtAnnotationChecked.value) {
        mLayerManager?.SetAnnotationLayerTop()
    }
}



const changeTdtAnnotation = (val: string | number | boolean) => {
    tdtAnnotationChecked.value = val as boolean
    if(TDT_KEY==""){
        ElMessage.error("请先在src/system/Config/SystemConfig.ts中配置天地图密钥TDT_KEY")
        tdtAnnotationChecked.value=false;
        return;
    }
    if (val) {
        mLayerManager?.Add(tdtAnnotationInfo)
    } else {
        mLayerManager?.Remove(LayerIdFlag.TDT_ANNOTATION_WMTS)
    }
}
</script>

<style lang="scss" scoped>
.layer-manager-container {
    padding: 10px;

    .layer-manager-title {
        font-size: 16px;
        font-weight: bold;
        margin-bottom: 10px;
    }

    .image-radio-container {
        text-align: left;

    }

    .layer-items {
        .el-checkbox {

            margin-left: 20px;
            height: 30px;
        }

        :deep(.el-checkbox__label) {
            color: white;
        }
    }

}
</style>